<template>
  <div>
    <div class="box">
      <span>用户列表</span>
      <input type="text" v-model="keyword" placeholder="请输入用户名" />
      <i class="iconfont icon-fangdajing" @click="search"></i>
    </div>
    <el-button type="success" @click="goadd">用户添加</el-button>

    <el-table :data="userList">
      <el-table-column prop="username" label="用户名" width="140">
      </el-table-column>
      <el-table-column prop="gender" label="性别" width="120">
      </el-table-column>
      <el-table-column prop="email" label="邮箱"> </el-table-column>
      <el-table-column prop="mobile" label="手机号"> </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.status"
            active-color="#13ce66"
            inactive-color="#ff4949"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            @click="goedit(scope.row.id)"
            type="primary"
            icon="el-icon-edit"
            circle
          ></el-button>
          <el-button
            @click="godel(scope.row.id)"
            type="danger"
            icon="el-icon-delete"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="fenye">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="changepage"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import api from '@/api'
export default {
  data() {
    return {
      pageNum: 1,
      total: 0,
      userList: [],
      keyword: ''
    }
  },
  methods: {
    // 根据用户名查找
    search() {
      console.log(this.keyword)
      this.$http.get(api.getUsers + '?keyword=' + this.keyword).then((res) => {
        console.log(res)
      })
    },
    getUserdata() {
      // 获取用户列表
      this.$http.get(api.getUsers + '?page=' + this.pageNum).then((res) => {
        // console.log(res)
        if (res.errNo === 0 && res.message === 'success') {
          this.total = res.paginate.total
          this.userList = res.paginate.data.map((item) => {
            item.gender =
              item.gender === '1' ? '男' : item.gender === '2' ? '女' : '保密'
            item.status = item.status === '1' ? true : false
            return item
          })
        }
      })
    },
    // 用户添加
    goadd() {
      this.$router.push('/dashboard/user/add')
    },
    goedit(id) {
      /* this.$store.commit('setUserId', id) */
      this.$router.push({ path: '/dashboard/user/mod', query: { id } })
    },
    // 删除用户
    godel(id) {
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.$http.delete(api.getUserdel + '/' + id).then((res) => {
            // console.log(res);
            if (res.errNo === 0 && res.message === 'success') {
              this.$message({
                type: 'success',
                message: '删除成功!'
              })
              this.getUserdata()
            } else {
              this.$message({
                type: 'error',
                message: '删除错误'
              })
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    changepage(val) {
      this.pageNum = val
      // console.log(val);
      this.getUserdata()
    }
  },
  created() {
    this.getUserdata()
  }
}
</script>

<style lang = 'scss' scoped>
.box {
  margin: 5px 20px;
  span {
    font-size: 25px;
    font-weight: 700;
    padding-right: 20px;
  }
  input {
    outline: none;
    width: 300px;
    height: 27px;
    padding-left: 10px;
  }
  i {
    font-size: 20px;
  }
}
.fenye {
  width: 100%;
  .el-pagination {
    width: 500px;
    margin: 10px auto 0;
  }
}
</style>
